<template>
  <div class="page-settings" :class="themeClass">
    <h1 class="settings-title">页面设置</h1>
    <p class="settings-description">
      该设置仅在当前浏览器生效，目前已支持部分核心页面，更多页面适配持续进行中，
      <a href="#" @click.prevent="openFeedback">如有建议可点击页面右下角反馈</a>。
    </p>

    <div class="theme-options">
      <el-radio-group v-model="selectedTheme">
        <el-radio label="light" class="theme-option">
          <span>浅色模式</span>
        </el-radio>
        <el-radio label="dark" class="theme-option">
          <span>深色模式</span>
        </el-radio>
        <el-radio label="system" class="theme-option">
          <span>跟随系统</span>
        </el-radio>
      </el-radio-group>
    </div>

    <el-divider />

    <div class="other-settings">
      <el-switch
        v-model="codeHelperEnabled"
        active-text="关闭代码助手"
        inactive-text="开启代码助手"
        @change="handleCodeHelperChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useDark, useToggle } from '@vueuse/core'

// 使用 VueUse 的主题管理
const isDark = useDark()
const toggleDark = useToggle(isDark)

// 状态管理
const selectedTheme = ref('light')
const codeHelperEnabled = ref(true)
const systemPrefersDark = ref(false)

// 检测系统主题偏好
const checkSystemTheme = () => {
  systemPrefersDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
}

// 应用主题
const applyTheme = (theme) => {
  if (theme === 'system') {
    toggleDark(systemPrefersDark.value)
  } else {
    toggleDark(theme === 'dark')
  }
  document.documentElement.setAttribute('data-theme', theme)
}

// 初始化
onMounted(() => {
  checkSystemTheme()
  const savedTheme = localStorage.getItem('themePreference') || 'light'
  selectedTheme.value = savedTheme
  applyTheme(savedTheme)

  codeHelperEnabled.value = localStorage.getItem('codeHelperEnabled') !== 'false'

  // 监听系统主题变化
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    systemPrefersDark.value = e.matches
    if (selectedTheme.value === 'system') {
      applyTheme('system')
    }
  })
})

// 监听主题变化
watch(selectedTheme, (newVal) => {
  localStorage.setItem('themePreference', newVal)
  applyTheme(newVal)
})

const handleCodeHelperChange = (val) => {
  localStorage.setItem('codeHelperEnabled', val)
}

const openFeedback = () => {
  console.log('打开反馈界面')
}
</script>

<style scoped>
.page-settings {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  transition: background-color 0.3s, color 0.3s;
}

.light-theme {
  background-color: #ffffff;
  color: #303133;
}

.dark-theme {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

.settings-title {
  font-size: 24px;
  margin-bottom: 16px;
}

.settings-description {
  color: inherit;
  opacity: 0.8;
  margin-bottom: 24px;
  line-height: 1.6;
}

.settings-description a {
  color: var(--el-color-primary);
  text-decoration: none;
}

.theme-options {
  margin-bottom: 24px;
}

.theme-option {
  display: block;
  margin-bottom: 12px;
}

.el-divider {
  margin: 20px 0;
}

.other-settings {
  display: flex;
  align-items: center;
}

/* 深色模式下的Element Plus组件样式 */
.dark-theme :deep(.el-radio__label),
.dark-theme :deep(.el-switch__label) {
  color: #e0e0e0 !important;
}

.dark-theme :deep(.el-radio__inner) {
  background-color: #2c2c2c;
  border-color: #4d4d4d;
}

.dark-theme :deep(.el-switch__core) {
  background-color: #4d4d4d;
}
</style>

<style>
:root {
  --el-color-primary: #409eff;
}

[data-theme="dark"] {
  --el-color-primary: #3375b9;
  --el-bg-color: #1a1a1a;
  --el-text-color-primary: #e0e0e0;
}

html {
  transition: background-color 0.3s, color 0.3s;
}
</style>
